/**
 * @module  支付页面
 * @author Yun Tang
 * @date 2020-12-22 13:12:27
 */
import React, { useState, useEffect } from 'react';
import { RouteComponentProps } from 'react-router';
import { Radio, Button, List, Toast } from 'antd-mobile';
import HeaderComponent from '../components/Header';
import request from '@src/utils/request';
import wx from 'weixin-js-sdk';
import moment from 'moment';
import './index.less';

const RadioItem = Radio.RadioItem;

const Pay = (props: RouteComponentProps) => {
  // eslint-disable-next-line no-restricted-globals
  const search = location.search.split('&');
  const no = search[0].split('=')[1];
  const money = search[1].split('=')[1];
  const account = search[2].split('=')[1];
  const [payType, setPayType] = useState<string>('weixin');
  const [time, setTime] = useState<number>(1800);

  const changeTime = () => {
    setTime(1800);
    let nowTime = 1800;
    const timer = setInterval(() => {
      // eslint-disable-next-line no-plusplus
      nowTime--;
      if (nowTime === 1) {
        clearInterval(timer);
        props.history.go(-1);
      }
      setTime(nowTime - 1);
    }, 1000);
  };

  useEffect(() => {
    changeTime();
  }, []);

  const getDetail = () => {
    const payUrl = payType === 'weixin' ? '/api/v1/wechat_pay' : '/api/v1/account_pay';
    request('post', payUrl, {
      no,
    })
      .then((res) => {
        console.log(res, 'Ds');
        if (res && res.code === 200) {
          if (payType === 'weixin') {
            // 微信支付
            const { appId, nonceStr, paySign, timestamp, package: packageId, id } = res.data;
            wx.config({
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId, // 必填，公众号的唯一标识
              timestamp, // 必填，生成签名的时间戳
              nonceStr, // 必填，生成签名的随机串
              signature: paySign, // 必填，签名
              jsApiList: ['chooseWXPay'], // 必填，需要使用的JS接口列表
            });
            wx.ready(() => {
              wx.chooseWXPay({
                timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                nonceStr, // 支付签名随机串，不长于 32 位
                package: packageId, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                paySign, // 支付签名
                success() {
                  // 支付成功后的回调函数
                  props.history.replace(`/orderDetail/${id}`);
                  Toast.success('支付成功');
                },
              });
            });
          } else {
            // 余额支付
            Toast.success('支付成功');
            props.history.replace(`/orderDetail/${res.data.id}`);
          }
        }
      })
      .catch((err) => {
        Toast.fail(err.message);
      });
  };

  return (
    <div className="pay">
      <HeaderComponent text="支付" />
      <ul className="pay-ul">
        <li className="pay-list">
          <span className="label">订单名称</span>
          <span className="text">{no}</span>
        </li>
      </ul>
      <ul className="pay-ul">
        <li className="pay-list">
          <span className="label">支付金额</span>
          <span className="text orange">{money} 元</span>
        </li>
      </ul>
      <List>
        <RadioItem checked={payType === 'weixin'} onChange={() => setPayType('weixin')}>
          <img className="icon-weixin" src={require('@src/img/paylist-wx.png')} alt="" />
          微信支付
        </RadioItem>
        <RadioItem checked={payType === 'account'} onChange={() => setPayType('account')}>
          <img className="icon-weixin" src={require('@src/img/yue.png')} alt="" />
          余额支付 （剩余¥{account}元）
        </RadioItem>
      </List>
      <div className="orderinfo-time">
        请在
        <span className="orange">
          {Math.floor(time / 60)}分{time % 60}秒
        </span>
        内完成付款，否则订单将自动取消。
      </div>
      <Button type="primary" onClick={getDetail} className="submit-btn">
        支付
      </Button>
    </div>
  );
};
export default Pay;
